<template>
	<view id="DocumentsBox" class="Documents-box">
		<!-- 单条单据 -->
		<view class="item" v-for="(item, index) in DocumentsData" :key="index" @click="clickItem(item)" :class="item.id == DocumentsId ? 'active' : ''">
			<view class="g-item-img">
				<image :src="item.goodImg ? item.goodImg : DocumentsImg" mode="scaleToFill"></image>
			</view>
			<view class="g-info">
				<view class="good-name">{{item.gName}}</view>
				<view class="good-stroe">库存：{{item.gStore}}</view>
				<view class="good-price"><text>{{item.price}}</text></view>
				<text class="good-flag" :class="'good-flag'+ fItem.id" v-for="(fItem,index1) in item.flagArr" :key="index1">
					{{fItem.name}}
				</text>
			</view>
			
		</view>
	</view>
</template>

<script>
import util from '../../js/util/Util.js';
import staticConst from "../../js/const/StaticConst.js";
export default {
	props: ['setHetght', 'DocumentsLs'],
	data() {
		return {
			hoverText: '点击复制单号',
			screenHeight: 0, //屏幕高度
			info: [], //展示的列表数据
			isLoading: false, //防止频繁触发
			bottomDistinct: 200, //距离底部多少像素时触发
			DocumentsId: null,
			DocumentsData: [
				{id:1001,goodImg:'../../static/temp/111.jpg',gName:'迪奥迪奥小姐花漾',gStore:'25',price:228,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				{id:1002,goodImg:'../../static/temp/222.jpg',gName:'迪奥迪奥小姐花漾',gStore:'55',price:328,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				{id:1003,goodImg:'../../static/temp/333.jpg',gName:'迪奥迪奥小姐花漾',gStore:'65',price:428,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				{id:1004,goodImg:'../../static/temp/333.jpg',gName:'迪奥迪奥小姐花漾',gStore:'65',price:428,flagArr:[{id:1,name:'推荐'},{id:4,name:'下架'},{id:3,name:'新品'}]},
				{id:1005,goodImg:'../../static/temp/333.jpg',gName:'迪奥迪奥小姐花漾',gStore:'65',price:428,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				{id:1006,goodImg:'../../static/temp/333.jpg',gName:'迪奥迪奥小姐花漾',gStore:'65',price:428,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				{id:1007,goodImg:'../../static/temp/333.jpg',gName:'迪奥迪奥小姐花漾',gStore:'65',price:428,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				{id:1008,goodImg:'../../static/temp/333.jpg',gName:'迪奥迪奥小姐花漾',gStore:'65',price:428,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				{id:1009,goodImg:'../../static/temp/333.jpg',gName:'迪奥迪奥小姐花漾',gStore:'65',price:428,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				{id:1010,goodImg:'../../static/temp/333.jpg',gName:'迪奥迪奥小姐花漾',gStore:'65',price:428,flagArr:[{id:1,name:'推荐'},{id:2,name:'上架'},{id:3,name:'新品'}]},
				
			],
			DocumentsImg:staticConst.GOOD_IMG,
		};
	},
	methods: {
		/*** 点击了某个item ***/
		clickItem(item)
		{
			//this.$emit("setBillsInfoData",item);
		},
		
		setBillsId(id)
		{
			this.DocumentsId = id;
		},
		
		handlerScroll()
		{
			let self = this;
			this.$nextTick(()=>
			{
				var flag = util.scrollData("#DocumentsBox");
				if(flag)
				{
					// 加载数据
					this.$emit("orderList");
				}
			});
		},
		
		/*** 点击复制单号 ***/
		coypOrderNum(data)
		{
			let url = data;
			let oInput = document.createElement('input');
			oInput.value = url;
			document.body.appendChild(oInput);
			oInput.select(); // 选择对象;
			document.execCommand("Copy"); // 执行浏览器复制命令
			// 复制成功提示;
			this.$msg({title : '复制单号成功'})
			oInput.remove()
		},
	},
	mounted()
	{
		// window.addEventListener("scroll",this.handlerScroll,true);
		document.querySelector("#DocumentsBox").addEventListener("scroll",this.handlerScroll,true);
	},
	destroyed()
	{
		// window.removeEventListener("scroll",this.handlerScroll);
		document.querySelector("#DocumentsBox").removeEventListener("scroll",this.handlerScroll);
	},
}
</script>

<style lang="scss">
.Documents-box {
	width: 345px;
	overflow-y: auto;
	.item {
		padding-top: 5px;
		background: #fff;
		cursor: pointer;
		border-bottom: 1px #EFEFEF solid;
		padding: 20px;
		background: #FFF;
		display: flex;
		.g-item-img
		{
			width: 100px;
			height: 100px;
			border-radius: 4px;
			overflow: hidden;
			image
			{
				width: 100px;
				height: 100px;
			}
		}
		.g-info
		{
			padding-left: 10px;
			.good-name
			{
				font-size: 18px;
				color: #333;
			}
			.good-stroe
			{
				font-size: 12px;
				color: #999;
			}
			.good-price
			{
				padding-left: 5px;
				font-size: 12px;
				color: red;
				text
				{
					font-size: 14px;
				}
			}
			.good-flag
			{
				font-size: 12px;
				padding-top: 3px;
				padding-bottom: 3px;
				padding-left: 10px;
				padding-right: 8px;
				color: #FFF;
				border-radius: 4px;
				margin-left: 5px;
				margin-right: 5px;
				.good-flag1
				{
					background-color: #F04848;
				}
				.good-flag2
				{
					background-color: #3388FF;
				}
				.good-flag3
				{
					background-color: #00C569;
				}
				.good-flag4
				{
					background-color: #5555ff;
				}
				.good-flag5
				{
					background-color: #00aa00;
				}
			}
		}
		
		
	}
	.item:hover {
		&.active {
			background: #E0F4FF;
		}
		background:#F8F8F8;
	}
	.active {
		background: #E0F4FF;
	}
}

.Documents-box {
	height: calc(100vh - 99px);
	margin-top: 139px;
}

.Documents-box::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}
.Documents-box::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
	background: #ccc;//rgba(0, 0, 0, 0.0);
	scrollbar-arrow-color: red;
}
.Documents-box::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.0);
	border-radius: 0;
	background: rgba(0, 0, 0, 0);
}
</style>
